<script lang="ts" setup>
import { computed, watch } from "vue";
import Dropdown from "./Dropdown.vue";
import DropdownItem from "./DropdownItem.vue";
import { useMainStore } from '@/stores/main'

export interface UserProps {
  isLogin: boolean;
  nickName?: string;
  _id?: number;
  column?: string;
  email?: string;
}
const props = defineProps<{
  user: UserProps;
}>();
const store = useMainStore();
const mycolumn = computed(() => store.user.column);
const logout = store.logout
watch(() => {
  console.log('global,Header', props.user, store.user)
})
</script>
<template>
  <nav class="navbar">
    <router-link to="/" class="navbar-brand">智慧阅读</router-link>x
    <ul v-if="!user.isLogin" class="list-inline">
      <li class="list-inline-item">
        <router-link class="btn btn-outline-light" to="/login">
          登录
        </router-link>
      </li>
      <li class="list-inline-item">
        <router-link class="btn btn-outline-light" to="/resign">
          注册
        </router-link>
      </li>
    </ul>
    <Dropdown v-else :title="`你好${user.nickName}`">
      <DropdownItem path="/createpost">
        <router-link to="/createpost">新建文章</router-link>
      </DropdownItem>
      <DropdownItem path="/editInfo">
        <router-link class="dropdown-link" to="/editInfo">编辑资料</router-link>
      </DropdownItem>
      <DropdownItem path="/column">
        <router-link :to="'/column/' + mycolumn">我的专栏</router-link>
      </DropdownItem>
      <DropdownItem>
        <a @click="logout">退出登录</a>
      </DropdownItem>
    </Dropdown>
  </nav>
</template>

<style lang="scss" scoped>
@import "@/css/common.scss";
.navbar {
  width: 1200px;
  margin: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
}
.navbar-brand {
  color: white;
  font-size: 20px;
}
.list-inline-item {
  display: inline-block;
  margin-right: 20px;
}
.list-inline {
  display: inline-block;
  margin: 0;
}
// 边框#d6e6ff
</style>
